<template>
  <div>
    <Jdd-Card :padding="15" style="margin-bottom:16px;">
      <div style="font-size: 16px;font-weight:600;">分步表单</div>
      <div
        style="margin-top:12px;"
      >将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。表单最后一步，成败与否都需要给用户一个提示，此处请查看结果页的布局示范。</div>
    </Jdd-Card>
    <Jdd-Card :padding="15">
      <Steps :current="currentStep" style="max-width:800px;margin:auto;">
        <Step title="基本信息" content="描述描述"></Step>
        <Step title="企业微信号" content="描述描述"></Step>
        <Step title="完成" content="描述描述"></Step>
      </Steps>

      <Form
        :model="stepForm"
        :label-width="90"
        :label-colon="true"
        ref="stepForm"
        :rules="ruleValidate"
        style="max-width:800px;margin:auto;margin-top:15px;"
      >
        <div v-if="currentStep===0">
          <FormItem label="标题" prop="title">
            <Jdd-Input v-model.trim="stepForm.title" placeholder="请输入标题" />
          </FormItem>
          <FormItem label="有效日期">
            <Jdd-DatePicker startTime="stepForm.startTime" endTime="stepForm.endTime"></Jdd-DatePicker>
          </FormItem>
          <FormItem label="目标描述">
            <Jdd-Input v-model.trim="stepForm.desc" placeholder="请输入阶段性工作目标" />
          </FormItem>
          <FormItem label="衡量标准">
            <Jdd-Input v-model.trim="stepForm.standard" placeholder="请输入衡量标准" />
          </FormItem>
          <FormItem label="用户" prop="userArr">
            <CheckboxGroup v-model="stepForm.userArr">
              <Checkbox
                v-for="item in userTypeList"
                :key="item.code"
                :label="item.code"
              >{{item.text}}</Checkbox>
            </CheckboxGroup>
          </FormItem>
          <FormItem label="邀请人">
            <Jdd-Input v-model.trim="stepForm.Inviter" placeholder="请输入邀请人" />
          </FormItem>
          <FormItem label="权重">
            <div style="display:flex;">
              <Jdd-Input v-model.trim="stepForm.weight" placeholder="请输入" type="number" />
              <span style="margin-left:5px;">%</span>
            </div>
          </FormItem>
          <FormItem label="目标公开" prop="isPulich">
            <RadioGroup v-model="stepForm.isPulich">
              <Radio label="1">公开</Radio>
              <Radio label="0">不公开</Radio>
            </RadioGroup>
          </FormItem>
          <div style="text-align:center;">
            <Jdd-BtnDefault type="primary" :form="'stepForm'" @click="nextStep">下一步</Jdd-BtnDefault>
            <Jdd-BtnBack @click="backClick">取消</Jdd-BtnBack>
          </div>
        </div>

        <div v-if="currentStep===1">
          <div :style="'padding:5px 20px;font-size:14px;background-color:'+color">
            <div style="margin:10px 0px;">
              <span>标题：</span>
              <span style="margin-left:5px;">{{stepForm.title}}</span>
            </div>
            <div style="margin:10px 0px;">
              <span>有效日期：</span>
              <span
                style="margin-left:5px;"
              >{{stepForm.startTime|dateFormat}} ~ {{stepForm.endTime|dateFormat}}</span>
            </div>
            <div style="margin:10px 0px;">
              <span>用户：</span>
              <span style="margin-left:5px;">{{userTypeText}}</span>
            </div>
            <div style="margin:10px 0px;">
              <span>目标公开：</span>
              <span style="margin-left:5px;">{{isPulichText}}</span>
            </div>
          </div>
          <FormItem label="告警通知" style="margin-top:15px;">
            <Jdd-SwitchText v-model="stepForm.opemAlarmNotice" size="small"></Jdd-SwitchText>
          </FormItem>
          <FormItem label="备注" prop="remarks">
            <Jdd-Input v-model.trim="stepForm.remarks" placeholder="请输入备注" type="textarea" />
          </FormItem>
          <div style="text-align:center;">
            <Jdd-BtnDefault :form="'stepForm'" @click="backStep">上一步</Jdd-BtnDefault>
            <Jdd-BtnSubmit :form="'stepForm'" @click="submitClick">提交</Jdd-BtnSubmit>
            <Jdd-BtnSubmit :form="'stepForm'" :beforeClick="beforeClick">直接提交</Jdd-BtnSubmit>
            <Jdd-BtnSubmit type="primary" :form="'stepForm'" :beforeClick="nextStepLast">到最后</Jdd-BtnSubmit>
          </div>
        </div>

        <div v-if="currentStep===2&&submitState">
          <div style="text-align:center;">
            <Jdd-Icon type="md-checkmark-circle" size="60" color="#5FB95E" />
            <div style="font-size:24px;margin-top:15px;">操作成功</div>
          </div>
          <div
            style="margin-top:10px;text-align:center;"
          >成功页为操作反馈页面，常用于反馈信息过多，或者需要引导用户继续完成操作的页面。详情信息在下方展示，页面注释在此处显示</div>
          <div :style="'padding:5px 20px;font-size:14px;margin-top:15px;background-color:'+color">
            <div style="margin:10px 0px;">
              <span>标题：</span>
              <span style="margin-left:5px;">{{stepForm.title}}</span>
            </div>
            <div style="margin:10px 0px;">
              <span>有效日期：</span>
              <span
                style="margin-left:5px;"
              >{{stepForm.startTime|dateFormat}} ~ {{stepForm.endTime|dateFormat}}</span>
            </div>
            <div style="margin:10px 0px;">
              <span>用户：</span>
              <span style="margin-left:5px;">{{userTypeText}}</span>
            </div>
            <div style="margin:10px 0px;">
              <span>目标公开：</span>
              <span style="margin-left:5px;">{{isPulichText}}</span>
            </div>
            <div style="margin:10px 0px;">
              <span>备注：</span>
              <span style="margin-left:5px;">{{stepForm.remarks}}</span>
            </div>
          </div>
          <div style="text-align: center;margin-top: 30px;">
            <Jdd-BtnDefault :form="'stepForm'" @click="nextStep">插件列表</Jdd-BtnDefault>
            <Jdd-BtnDefault type="primary" :form="'stepForm'" @click="nextStepLast">配置告警规则</Jdd-BtnDefault>
          </div>
        </div>

        <div v-if="currentStep===2&&!submitState">
          <div style="text-align:center;">
            <Jdd-Icon type="md-close-circle" size="60" color="#F05A28" />
            <div style="font-size:24px;margin-top:15px;">操作失败</div>
          </div>
          <div style="margin-top:10px;text-align:center;">请核对并修改以下信息后，再重新提交。</div>
          <div :style="'padding:10px 20px;font-size:14px;margin-top:15px;background-color:'+color">
            <div style="padding:10px 0px;">
              <Jdd-Icon type="ios-close-circle-outline" size="16" color="#F05A28" />
              <span style="margin:0px 15px 0px 5px;">您选择的集群已不存在</span>
              <a href="javascript:;" @click="gotoStepClick(0)">重新选择 ></a>
            </div>
            <div style="padding:10px 0px;">
              <Jdd-Icon type="ios-close-circle-outline" size="16" color="#F05A28" />
              <span style="margin:0px 15px 0px 5px;">您的账户还不具备申请资格</span>
              <a href="javascript:;" @click="gotoStepClick(1)">重新升级 ></a>
            </div>
          </div>
        </div>
        <div v-if="currentStep===3">
          <div style="text-align:center;">
            <Jdd-Icon type="md-checkmark-circle" size="60" color="#5FB95E" />
            <div style="font-size:24px;margin-top:15px;">操作成功</div>
          </div>
          <div
            style="margin-top:10px;text-align:center;"
          >成功页为操作反馈页面，如果只是简单的操作反馈，不需要此页，只用弹窗或者悬浮层表示即可。只有反馈信息过多，或者需要引导用户继续完成操作，才使用该页的表示方式。复杂的详细信息可以在下方展示，无论是列表还是大段落的文本信息，请根据实际内容斟酌布局。</div>
          <Divider />
          <div>
            <div>告警IP统计数据（共7项）</div>
            <div
              style="border-left: 1px solid #DDDEE1;border-top: 1px solid #DDDEE1;margin-top: 15px;"
            >
              <div
                v-for="index in 3"
                :key="index"
                style="height:28px;line-height: 28px;display:flex;"
              >
                <div
                  v-for="childIndex in 4"
                  :key="childIndex"
                  :style="'width: 25%;text-align:center;border-right: 1px solid #DDDEE1;border-bottom: 1px solid #DDDEE1;background-color:'+(childIndex%2?'#F8F8F8':'#FFF')"
                >172.25.152.242</div>
              </div>
            </div>
          </div>
          <div style="text-align:center; margin-top:15px;">
            <Jdd-BtnDefault type="primary" @click="finishClick">返回列表</Jdd-BtnDefault>
            <Jdd-BtnDefault>配置告警规则</Jdd-BtnDefault>
          </div>
        </div>
      </Form>
    </Jdd-Card>
  </div>
</template>
<script>
import Vue from 'vue'
import { appAdd } from '../scripts/api'
const dateFormat = Vue.filter('dateFormat')
export default {
  name: 'stepForm',
  data () {
    return {
      currentStep: 0,
      submitState: false,
      ruleValidate: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }
        ],
        userArr: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value || value.length <= 0) {
                callback(new Error('请选择用户'))
              } else {
                callback()
              }
            }
          }
        ],
        isPulich: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value && value !== '0') {
                callback(new Error('请选择是否目标公开'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      stepForm: {
        title: '',
        startTime: new Date().getTime() - 300 * 60000,
        endTime: new Date().getTime(),
        desc: '',
        standard: '',
        userArr: [],
        Inviter: '',
        weight: 0,
        isPulich: '0',
        opemAlarmNotice: true,
        remarks: ''
      },
      userTypeList: [
        { code: 'develop', text: '开发者' },
        { code: 'admin', text: '管理员' },
        { code: 'role', text: 'role' }
      ]
    }
  },
  computed: {
    color () {
      return this.$store.state.theme === 'white' ? '#F8F8F8' : '#292929'
    },
    userTypeText () {
      let userText = ''
      this.stepForm.userArr.map(item => {
        const filterList = this.userTypeList.filter(childItem => {
          return childItem.code === item
        })
        if (filterList.length > 0) {
          userText = userText
            ? `${userText},${filterList[0].text}`
            : filterList[0].text
        }
      })
      return userText
    },
    isPulichText () {
      return this.stepForm.isPulich === '0' ? '不公开' : '公开'
    }
  },
  methods: {
    nextStep () {
      this.$refs.stepForm.validate(valid => {
        if (valid) {
          this.currentStep++
        }
      })
    },
    submitClick (val, msgProxy) {
      if (val) {
        msgProxy(appAdd(this.stepForm)).then(res => {
          if (res.status === 200) {
            this.currentStep++
            this.submitState = true
          } else {
            this.submitState = false
          }
        })
      }
    },
    beforeClick () {
      this.$refs.stepForm.validate(valid => {
        if (valid) {
          this.$sysMessageProxy(appAdd(this.stepForm), '提交').then(res => {
            if (res.status === 200) {
              this.currentStep++
            }
          })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    backClick () {},
    backStep () {
      this.currentStep--
    },
    gotoStepClick (index) {
      this.currentStep = index
    },
    nextStepLast () {
      this.$refs.stepForm.validate(valid => {
        if (valid) {
          this.currentStep = 3
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    finishClick () {
      this.resetFrom()
      this.currentStep = 0
    },
    resetFrom () {
      this.stepForm = {
        title: '',
        startTime: new Date().getTime() - 300 * 60000,
        endTime: new Date().getTime(),
        desc: '',
        standard: '',
        userArr: [],
        Inviter: '',
        weight: 0,
        isPulich: '0',
        opemAlarmNotice: true,
        remarks: ''
      }
    }
  }
}
</script>
